<template>
  <div class="bodybox">
    <!-- 显示日记数 -->
    <div class="main-top">共&nbsp;{{ this.$store.state.searchDiaryNum }}&nbsp;篇</div>
    <!-- 滑动单元格 -->
    <van-swipe-cell v-for="(item, index) in searchDiaryList" :key="item.articleid" :disabled="SwipeCell">
      <!-- 日记 -->
      <div class="main-body animate__animated animate__fadeInUp" @click="logId(item, index)">
        <div class="body-left">
          <span>{{ item.week }}</span>
          <p>{{ item.date }}</p>
        </div>
        <div class="body-right">
          <div class="right-top">
            <span class="content" v-html="item.content"></span>
            <span class="ellipsis" v-if="searchDiaryList[index].content.length >= 289"></span>
          </div>
          <div class="right-body">
            <div v-if="searchDiaryList[index].imgurl === '' || searchDiaryList[index].imgurl === null || searchDiaryList[index].imgurl <= 0"></div>
            <div v-else>
              <van-image fit="cover" v-for="(data, i) in searchDiaryList[index].imgurl.split('||')" :key="i" :src="data" />
            </div>
          </div>
          <div class="right-footer">
            <i v-show="searchDiaryList[index].wearther !== '获取天气失败'" :class="'qi-' + item.nowicon">&nbsp;·&nbsp;</i>
            <span>{{ item.time }}&nbsp;·&nbsp;</span>
            <span v-show="searchDiaryList[index].wearther !== '获取天气失败'">{{ item.wearther }}&nbsp;·&nbsp;</span>
            <span v-show="searchDiaryList[index].wearther !== '获取天气失败'">{{ item.temperature }}°C&nbsp;·&nbsp;</span>
            <span>{{ item.cityname }}</span>
          </div>
        </div>
      </div>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="leftFn(item, index)" />
      </template>
    </van-swipe-cell>
    <!-- 分割线 -->
    <van-divider dashed :style="{ color: '#9e9e9e', borderColor: '#9e9e9e' }" v-show="true">到底了捏~</van-divider>
    <!-- 加载中 -->
    <!-- <van-loading size="24px" vertical >加载中...</van-loading> -->
  </div>
</template>

<script>
import { getUserDiaryApi, delUserDiaryApi } from '@/api/index'
import { Toast } from 'vant'

export default {
  name: 'searchDiary',
  // 接收 用户 添加的 日记 数据
  data () {
    return {
      // 用户日记数据
      userList: [],
      // 循环渲染用户日记数据的索引  index
      userListIndex: '',
      // 用户日记 数量
      diaryNum: '',
      // 控制 分割线
      // dividerShow: false,
      // 控制是否能滑动
      SwipeCell: false
    }
  },
  // 父组件 test 正则搜索 过来的 搜索日记数据
  props: ['searchDiaryList'],
  methods: {
    // 点击 那个 日记
    logId (item, index) {
      // console.log(item)
      // // console.log(index)
      // console.log('进入第' + index + '个articleid为' + item.articleid + '日记')
      this.$router.replace('/userdiary')
      this.$store.commit('clickDiaryListFn', item)
    },
    // // 计算用户日记数量
    // computeDiaryNum () {
    //   this.userList.forEach((val, index) => {
    //     this.diaryNum = index + 1
    //   })
    //   this.$store.commit('computeDiaryNum', this.diaryNum)
    // },
    // 左滑点击删除
    async leftFn (item, index) {
      // 将所有 Toast 的展示时长设置为 2000 毫秒
      // Toast.setDefaultOptions({ duration: 8000 })
      Toast.loading({
        message: '删除日记ing...',
        forbidClick: true,
        duration: 2000
      })

      // console.log(item)
      // console.log('删除第' + index + '个articleid为' + item.articleid + '日记')
      const id = this.$store.state.userInfoData.id
      // const data =
      await delUserDiaryApi(id, item.articleid)
      // console.log(data)
      // 删除成功后 =>  更新数据
      // console.log('日记创建发起请求用户日记')
      // console.log(id)
      const { data: res } = await getUserDiaryApi(id)
      // console.log(res)
      if (res.data === undefined) {
        // console.log('该用户没有写日记')
        // 用户没有写日记  => 主页默认显示 一条 默认数据的日记
        this.diaryNum = 1
        this.SwipeCell = true
        this.$emit('getDiaryNum', this.diaryNum)
        this.userList = this.defaultList
      } else if (res.status === 201) {
        Toast.clear()
        // this.userList = res.data
        // 翻转数组, 将最新添加的日记在上面
        const arr = res.data
        this.userList = arr.reverse()
        this.$store.commit('setUserDiaryList', res.data)
        // this.userList = this.$store.state.userDiaryList
      } else {
        Toast.fail('删除失败 稍后再试')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bodybox {
  margin-bottom: 30px;
  height: 100%;
  // .skeleton {
  //   /deep/.van-skeleton {
  //     padding: 30px 10px;
  //   }
  // }
  .main-top {
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: #969799;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .van-swipe-cell {
    .main-body {
      display: flex;
      margin: 20px 0;
      // padding-right: 5px;
      .body-left {
        width: 22%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-right: 10px;
        span {
          font-size: 13.5px;
          color: #969799;
        }
        p {
          font-size: 13px;
          color: #969799;
          padding-top: 5px;
        }
      }
      .body-right {
        width: 80%;
        border: 0.2px solid #ededed;
        box-shadow: 1px 1px 8px 0px #ededed;
        border-radius: 10px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        // max-height: 270px;
        min-height: 50px;
        .right-top {
          font-size: 15px;
          color: #6d6d6d;
          position: relative;
          .content {
            display: inline-block;
            white-space: normal;
            word-break: break-all;
            text-align: left;
            line-height: 22px;
            text-align: left;
            letter-spacing: 2px;
            overflow: hidden;
            max-height: 64px;
            padding-right: 11px;
          }
          .ellipsis::after {
            content: "...";
            display: inline;
          }
          .ellipsis {
            position: absolute;
            bottom: 5px;
            right: 3px;
          }
        }
        .right-body {
          width: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 10px;
          div {
            display: flex;
            .van-image {
              width: 74px;
              height: 74px;
              padding-right: 2px;
              padding-left: 3px;
              /deep/.van-image__img {
                border-radius: 10px;
              }
            }
          }
        }
        .right-footer {
          font-size: 13px;
          color: #969799;
          padding-top: 15px;
        }
      }
    }
    /deep/.van-swipe-cell__right {
      right: -2px !important;
    }
    .van-button {
      height: 100%;
    }
    .van-button--square {
      border-radius: 10px;
    }
  }
  /deep/.van-divider {
    margin: 50px 10px !important;
  }
}
</style>
